<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css选择器</title>
    <style>
        /* 元素1 元素2  */
        /* 会选中元素1下面所有的元素2 */
        /* 会选中元素1的所有后代 */
        /* div span{
            color: red;
        } */
        /* 元素1 元素2 */
        /* 会选中元素1下面直接子代元素2 */
        div>span{
            color: red;
        }
        /* div:first-child{
            font-size:50px;
            color: blueviolet;
            font-style: italic;
        } */
        /* 伪类选择器鼠标光标悬停在元素上 */
        #myHover:hover{
            color: greenyellow;
            /* 光标样式 */
            cursor:pointer;
        }
        #myBtn{
            border: 1px solid #777;
            border-radius: 6px;
            width: 130px;
        }
        #myBtn:hover{
            color: orange;
            font-size: 18px;

            /* 光标样式 */
            cursor: pointer;
        }
        #divOne{
      width: 400px;
      height: 100px;
      border: 1px solid red;
    }
    #dinInner{
      width: 50%;
      min-width: 80px;
      max-width: 150px;
      border: 1px solid yellowgreen;
    }
    </style>
</head>
<body>
    <!-- <b>加粗</b> -->
    <!-- <i>斜体</i> -->
    <!-- 父元素 -->
    <div id="divOne">
        <div id="dinInner">
          宽高测试
        </div>
      </div>
    <div>
        <!-- 子元素1 是div的直接子代-->
        <span>子元素1</span>
        <!-- 子元素2 -->
        <table>
            <tr>
                <!-- 这里的span是div的后代 不是直接子代 -->
                <td><span>子元素2中的span</span>
                </td>
            </tr>
        </table>
        <span>子元素1</span>
        <span>子元素1</span>
        <h2>伪类选择器</h2>
    <div id="maHover">伪类选择器</div>
    <!-- 自定义按钮 -->
    <div id="myBtn">

        点我中奖100万
    </div>
    </div>
</body>
</html>